﻿/* 固定悬浮窗核心样式 - 仅作用于.yb_conct容器 */
.yb_conct {
  position: fixed;
  z-index: 9999999;
  top: 20%; /* 改为百分比，适配不同屏幕高度，保持固定上下比例 */
  right: -127px;
  cursor: pointer;
  transition: all .3s ease;
  /* 重置容器内的默认样式，不影响全局 */
  padding: 0;
  margin: 0;
  border: none;
}

/* 容器内的ul/ol/li样式 - 仅作用于.yb_conct内部 */
.yb_conct ul,
.yb_conct ol,
.yb_conct li {
  list-style: none;
  padding: 0;
  margin: 0;
  border: none;
}

/* 容器内的em/i样式 */
.yb_conct em,
.yb_conct i {
  font-style: normal;
}

/* 容器内的a标签样式 */
.yb_conct a {
  text-decoration: none;
  color: #333;
}

/* 容器内的img样式 - 仅作用于联络栏内的图片 */
.yb_conct img {
  display: inline-block;
  border: 0 none;
  padding: 0;
  margin: 0;
}

/* 清除浮动样式 - 限定作用域 */
.yb_conct .clear:after {
  content: '\20';
  display: block;
  height: 53px;
  clear: both;
  visibility: hidden;
}

/* 联络栏内部列表项样式 */
.yb_conct .yb_bar ul li {
  width: 180px;
  height: 53px;
  font: 16px/53px 'Microsoft YaHei';
  color: #fff;
  text-indent: 54px;
  margin-bottom: 3px;
  border-radius: 3px;
  transition: all .5s ease;
  overflow: hidden;
  background-color: #ff4a00; /* 兜底背景色，避免图片加载失败时无样式 */
}

/* 各列表项背景图样式 */
.yb_conct .yb_bar .yb_top {
  background: #ff4a00 url(/images/fixCont.png) no-repeat 0 0;
}

.yb_conct .yb_bar .yb_phone {
  background: #ff4a00 url(/images/fixCont.png) no-repeat 0 -57px;
}

.yb_conct .yb_bar .yb_QQ {
  text-indent: 0;
  background: #ff4a00 url(/images/fixCont.png) no-repeat 0 -113px;
}

.yb_conct .yb_bar .yb_QQ2 {
  background: #ff4a00 url(/images/fixCont.png) no-repeat 0 -169px;
}

.yb_conct .yb_bar .yb_ercode {
  background: #ff4a00 url(/images/fixCont.png) no-repeat 0 -227px;
  text-indent: 0; /* 清除默认文字缩进 */
  text-align: center; /* 水平居中 */
  line-height: normal; /* 重置行高，避免干扰垂直居中 */
  /* 核心垂直居中：使用flex布局，最简单且精准 */
  display: flex;
  flex-direction: column; /* 垂直排列（文字在上，图片在下） */
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中（双重保障） */
  padding: 0; /* 移除之前的padding-top，避免偏上 */
}

/* 二维码图片容器样式 */
.yb_conct .qr_wrap {
  padding: 2px 0 0 0; /* 微调文字和图片的间距，仅留少量空隙 */
  width: 100%;
  text-align: center;
}

.yb_conct .hd_qr {
  width: 77px;
  height: auto;
  margin: 0 auto; /* 图片水平居中 */
  display: block;
}

/* QQ链接样式 */
.yb_conct .yb_bar .yb_QQ a {
  display: block;
  text-indent: 54px;
  width: 100%;
  height: 100%;
  color: #fff;
}

/* 鼠标悬浮展开效果 */
.yb_conct:hover {
  right: 0;
}